<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Form to upload TLS certificate and key" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Configure TLS | Admin Console</title>
    <link rel="stylesheet" href="/tls/assets/output.css" />
    <link rel="stylesheet" href="/tls/assets/tls-custom.css" />
    {{if .AppIcon }}
    <link rel="icon" type="image/png" href="{{ .AppIcon }}" />
    {{end}}
    <script src="/tls/assets/tls.js"></script>
  </head>

  <body>
    <div class="flex !flex-col flex-1">
      <div class="NavBarWrapper">
        <div class="flex flex-auto h-[50px]">
          <div class="flex items-center flex-1 relative">
            <div class="HeaderLogo">
              {{if .AppIcon }}<span
                class="appIcon flex"
                style="background-image: url('{{ .AppIcon }}')"
              ></span
              >{{end}}
            </div>
          </div>
        </div>
      </div>

      <div class="min-h-full w-full flex flex-1">
        {{if .IsEmbeddedCluster }}
        <div class="bg-[#F9FBFC] min-400">
          <div class="py-8 pl-8 shadow-[0_1px_0_#c4c8ca]">
            <span class="text-lg font-semibold !color-gray-[#323232]">
              Let's get you started!
            </span>
          </div>
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-bold flex text-[#323232] items-center"
          >
            <img
              src="/tls/assets/images/check.svg"
              alt="check"
              style="width: 16px; height: 16px"
            />
            <span class="ml-2"> Secure the Admin Console </span>
          </div>
          {{if .IsMultiNodeEnabled }}
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c] items-center"
          >
            <img
              src="/tls/assets/images/check.svg"
              alt="check"
              style="width: 16px; height: 16px"
            />
            <span class="ml-2"> Configure the cluster </span>
          </div>
          {{end}}
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c] items-center"
          >
            <img
              src="/tls/assets/images/check.svg"
              alt="check"
              style="width: 16px; height: 16px"
            />
            <span class="ml-2"> Configure {{.AppTitle}} </span>
          </div>
          <div
            class="p-8 shadow-[0_1px_0_#c4c8ca] font-medium flex text-[#9c9c9c9c] items-center"
          >
            <img
              src="/tls/assets/images/check.svg"
              alt="check"
              style="width: 16px; height: 16px"
            />
            <span class="ml-2">
              Validate the environment & deploy {{.AppTitle}}
            </span>
          </div>
        </div>
        {{end}}
        <div class="tlsContent--wrapper px-8 width-900">
          <p class="tls-header my-8">Secure the Admin Console</p>
          <hr />
          <div class="mt-8 p-8 bg-[#F9FBFC] flex-column flex">
            <div class="flex-column flex1 justifyContent--center">
              <p class="tls-header mb-8">
                Choose whether to continue using a self-signed certificate or
                upload your own
              </p>
            </div>

            <form
              id="upload-form"
              class="flex-column"
              action=""
              method="post"
              enctype="multipart/form-data"
            >
              <p class="tls-section-header2">Certificate type</p>

              <div class="flex gap-4 mb-4">
                <label for="self-signed">
                  <div class="cert-type-box checked-background">
                    <input
                      type="radio"
                      name="type"
                      id="self-signed"
                      value="self-signed"
                      checked
                      autocomplete="off"
                      class="hidden-input"
                    />
                    <span>Self-signed</span>
                  </div>
                </label>

                <label for="custom-cert">
                  <div class="cert-type-box">
                    <input
                      type="radio"
                      name="type"
                      id="custom-cert"
                      value="custom-cert"
                      autocomplete="off"
                      class="hidden-input"
                    /><span>Upload your own</span>
                  </div>
                </label>
              </div>
              <p class="tls-header-sub self-signed-visible !mb-4">
                Continue using a self-signed certificate to secure communication
                with the Admin Console. You will see a warning in your browser
                when you access the Admin Console, but this is expected and
                secure.
              </p>
              <p class="tls-header-sub custom-cert-visible hidden !mb-4">
                Upload a trusted certificate to secure communication with the
                Admin Console.
              </p>
              <div>
                <p class="tls-section-header2">
                  Hostname
                  <span class="self-signed-visible">(optional)</span>
                </p>
                <p id="hostname-hint" class="hostname-hint"></p>
                <p class="tls-section-sub-sub">
                  Ensure this domain is routable on your network.
                </p>
                <input
                  id="hostname"
                  class="form-input larger"
                  type="text"
                  name="hostname"
                  placeholder="app.yourdomain.com"
                  style="width: 250px; margin-bottom: 20px"
                />
              </div>
              <div
                class="flex upload-form hidden custom-cert-visible"
                id="upload-files"
              >
                <div class="u-position--relative flex-column upload">
                  <label class="tls-section-header2">Upload private key</label>

                  <input type="file" name="key" id="key" class="inputkey" />
                  <label for="key" class="btn secondary u-marginTop--8 w-fit"
                    >Choose private key</label
                  >
                  <p id="key-label" class="tls-header-sub">No file chosen</p>
                </div>

                <div
                  class="u-position--relative flex-column flex-auto u-marginRight--15 upload"
                >
                  <label class="tls-section-header2"
                    >Upload SSL certificate</label
                  >

                  <input type="file" name="cert" id="cert" class="inputcert" />
                  <label for="cert" class="btn secondary u-marginTop--8 w-fit"
                    >Choose SSL certificate</label
                  >
                  <p id="cert-label" class="tls-header-sub">No file chosen</p>
                </div>
              </div>

              <div id="error" style="display: none">
                <div class="notification is-warning">
                  <p id="tls-error-msg"></p>
                </div>
              </div>

              <div class="button-wrapper flex justifyContent--end">
                <button class="btn primary" type="submit">
                  <span class="self-signed-visible">Continue</span>
                  <span class="custom-cert-visible hidden">Continue</span>
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
